import React from 'react';
import { TimePicker as AntdTimePicker } from 'antd';
import type { TimePickerProps as AntdTimePickerProps } from 'antd';
import { createStyles } from 'antd-style';

export interface TimePickerProps extends AntdTimePickerProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  timePicker: css`
    width: 100%;
  `,
}));

const TimePickerComponent: React.FC<TimePickerProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const timePickerClassName = cx(
    className,
    customClassName,
    styles.timePicker
  );

  return <AntdTimePicker className={timePickerClassName} {...restProps} />;
};

const TimePicker = Object.assign(TimePickerComponent, {
  RangePicker: AntdTimePicker.RangePicker,
  _InternalPanelDoNotUseOrYouWillBeFired: AntdTimePicker._InternalPanelDoNotUseOrYouWillBeFired,
});

export { TimePicker };
export default TimePicker;

